<script setup lang="ts" >
import { onMounted } from 'vue';
import * as echarts from 'echarts';
onMounted(() => {
    productCategoryBar()
})
const productCategoryBar = async () => {
    const pcb = echarts.init(document.getElementById('Horizonta'))
    pcb.setOption({
        title: {
            text: "产品类别库存总价图",
            subtext: "比较",
            top: "0%",
            textStyle: {
                fontSize: 16
            },
        },
        tooltip: {
            trigger: 'axis',
        },
        xAxis: {
            type: 'category',
            // 食品类，服装类，鞋帽类，日用品类，家具类，家用电器类，纺织品类，五金类
            data: ['食品类', '服装类', '鞋帽类', '日用品类', '五金类']
        },
        yAxis: {
            type: 'value',
            position: 'right',

        },
        series: [
            {
                data: [20000, 40000, 10000, 40000, 20000],
                type: 'bar',
                barWidth: 40,
                colorBy: "data",

            },
        ]
    })
    window.addEventListener('resize', function () {
        pcb.resize()
    })
}
</script>

<template>
    <div>
        <div class="title">【大区数据信息】</div>
        <div ref="target" class="HorizontalBar" id="Horizonta">
        </div>
    </div>
</template>

<style scoped lang="scss">
.title {
    color: rgb(198, 31, 198);
    font-weight: 800;
    margin-left: 4em;
  
}

.HorizontalBar {
    width: 100%;
    height: 25vh;

}
</style>